<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>跨域拦截和同源策略</title>
</head>

<body>
  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
  <script>
    //请求本地的json数据文件
    //$.get('../json/films.json', function (obj) {

    /*
      请求卖座网数据
 
      报错
      已拦截跨源请求：
      同源策略禁止读取位于 https://m.maizuo.com/gateway?cityId=320500&pageNum=1&pageSize=10&type=1&k=2069287 的远程资源。
      （原因：CORS 头缺少 'Access-Control-Allow-Origin'）。状态码：404。
 
      概念: 
      1. 跨域: 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
      2. 浏览器的同源策略, 即出于安全考虑, 浏览器会拦截非同源(跨域)的请求,导致请求数据的失败
         同源是指：协议相同，域名相同，端口相同 都相同
 
      如何处理跨域请求?
      前端处理
        1.改发JSONP
        2.CORS
 
      后端
        在后端服务器中添加相应的请求处理代码,允许通行即可
    */
    $.ajax({
      type: 'get',
      url: 'https://m.maizuo.com/gateway?cityId=320500&pageNum=1&pageSize=10&type=1&k=2069287',
      //ajax请求发送前设置请求头
      beforeSend(xhr) {
        xhr.setRequestHeader("X-Host", "mall.film-ticket.film.list")
      },
      success(result, status, xhr) {
        console.log(result)
      }
    })
  </script>
</body>

</html>